<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>ref为引用数据类型obj：{{ obj }}</p>
    <p>直接解构的值（数据没有响应式）：{{ name }}--{{ age }}</p>
    <p>toRefs函数解构的值（数据没有响应式）：{{ name }}--{{ age }}</p>
    <button @click="obj.name+='1'">修改obj内部name的值</button>
    <button @click="obj.age++">修改obj内部age的值</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import {ref, toRefs} from "vue";

// ts 类型限制

type scoreType = {
  ch: number[],
  math: number[]
}

interface ObjType {
  name: string,
  age: number,
  sex: string,
  hobby: string[],
  score: scoreType
}

const obj = ref<ObjType>({
  name: '李四',
  age: 12,
  sex: '男',
  hobby: ['唱', '跳', 'rap'],
  score: {
    ch: [1, 2, 3, 4],
    math: [2, 3, 4, 5]
  }
})

// 直接解构
// const {name, age} = obj.value

// 通过toRefs结构
const {name, age} = toRefs(obj.value)
</script>
